<script setup>
import { ref } from "vue";
const week = ref("1");
</script>

<template>
  <div class="account-info">
    <div class="item-wrap">
      <div class="name-wrap">
        <div>总钱包余额</div>
        <div class="recharge">去充值></div>
      </div>
      <div class="money">$3000,222</div>
      <div style="font-size: 14px; color: #999">预计可用总天数：10天</div>
    </div>
    <div class="item-wrap">
      <div class="name-wrap">
        <div>账户总数</div>
        <div class="recharge">去开户></div>
      </div>
      <div class="money">50</div>
      <div style="font-size: 14px; color: #999">被封禁：0</div>
      <div style="font-size: 14px; color: #999">审核中：8</div>
    </div>
    <div class="item-wrap">
      <div class="name-wrap">
        <div>花费</div>
        <div class="recharge">去对账></div>
      </div>
      <div class="money">$3000,222</div>
      <div style="font-size: 14px; color: #999">
        <el-radio-group v-model="week">
          <el-radio value="1" size="large"> 上月 </el-radio>
          <el-radio value="2" size="large"> 上周 </el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.account-info {
  margin: 20px;
  background-color: #fff;
  border: #dcdfe6 solid 1px;
  height: 210px;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  .item-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .name-wrap {
      display: flex;
      color: #333;
      font-size: 18px;
      font-weight: 500;
      .recharge {
        color: #17bd9c;
        font-size: 12px;
        margin-top: 6px;
        padding-left: 6px;
      }
    }
    .money {
      color: #333;
      font-size: 22px;
      margin: 10px 0;
      font-weight: 500;
    }
  }
}
</style>
